<template>
  <div class="answer_set">
    <el-form ref="form" :model="form" :rules="rules" label-width="1.8rem">
      <el-form-item label="通过条件设置" class="label_desc" prop="passSet">
        <el-switch v-model="form.passSet"></el-switch>
      </el-form-item>
      <el-form-item label="每个阶段完成" class="label_desc_2" prop="passSetValue">
        <el-input class="input_normal" v-model.number="form.passSetValue"></el-input>
        <span class="label_desc_2">%即可解锁下一关</span>
      </el-form-item>
      <el-form-item label="勋章获得设置" class="label_desc" prop="honorSet" style="display: none">
        <el-switch v-model="form.honorSet"></el-switch>
      </el-form-item>
      <el-form-item label="每个阶段完成" class="label_desc_2" prop="honorSetValue" style="display: none">
        <el-input class="input_normal" v-model.number="form.honorSetValue"></el-input>
        <span class="label_desc_2">%即可获得阶段勋章</span>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSubmit('form')" v-if="hasApi('answerSetSave')" class="btn_sure" type="primary">保存</el-button>
        <el-button @click="onReset()" v-if="hasApi('answerSetSave')" class="btn_cancle">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
var vm,user;
export default {
  components: {},
  data: function() {
    var checkPassSetValue = (rule, value, callback) => {
      if (value == 0) {
        return callback(new Error('必须大于等于1'));
      }
      if (!value) {
        return callback(new Error('不能为空'));
      }
      // setTimeout(() => {
      if (!Number.isInteger(value)) {
        callback(new Error('请输入数字'));
      } else {
        if (value > 100) {
          callback(new Error('必须小于等于100'));
        } else if (value < 1) {
          callback(new Error('必须大于等于1'));
        } else {
          callback();
        }
      }
      // }, 1000);
    };
    return {
      form: {
        passSet: 1,
        passSetValue: 100,
        honorSet: 1,
        honorSetValue: 100,

      },
      rules: {
        passSetValue: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { validator: checkPassSetValue, trigger: 'blur' },
        ]
      },
      setting: {
        passValue: 100,
        bEnable: 1,
      },
      defaultSetting: {
        passValue: 100,
        bEnable: 0,
        orgId : null
      }
    }
  },
  compute: {

  },
  methods: {
    onSubmit(formName) {
      vm.$refs[formName].validate((valid) => {
        if (valid) {
          var data = {
            bEnable: vm.form.passSet ? 1 : 0,
            passValue: vm.form.passSetValue,
            orgId : user.orgId
          }
          api.answerSetSave(data).then(function(data) {
            vm.$message.success('设置成功！');
            tool.setItem("answer_set", vm.form, true);
          }).catch(function(error) {
            vm.$message.error('设置失败！');
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onReset() {
      api.answerSetSave(vm.defaultSetting).then(function(data) {
        vm.form.passSet = false;
        vm.form.passSetValue = 100;
        vm.$message.success('重置成功！');
        tool.setItem("answer_set", vm.form, true);
      }).catch(function(error) {
        vm.$message.error('重置失败！');
      });
    }
  },
  mounted: function() {
    var localdata = tool.getItem("answer_set", true);
    if (localdata != null) {
      vm.form = localdata;
    }
    
    api.answerSetInfo({orgId: user.orgId}).then(function(data) {
      vm.setting = data;
      vm.form.passSet = data.bEnable == 1 ? true : false;
      vm.form.passSetValue = parseInt(data.passValue);
      tool.setItem("answer_set", vm.form, true);
    }).catch(function(error) {
      vm.$message.error('获取设置失败！');
    });
  },
  created: function() {
    vm = this;
    user = tool.getItem(lsKey.user, true);
    vm.defaultSetting.orgId = user.orgId;
  }
}

</script>
<style lang="scss">
.answer_set {
  .el-form {
    position: relative;
    margin: 0.2rem;
    height: 7rem;
  }

  .el-form .el-form-item:last-child {
    position: absolute;
    margin: 0 auto;
    bottom: 0rem;
    left: 2.3rem;
  }

  .el-form-item__label {
    font-size: 0.2rem;
    color: #666666;
  }

  .el-input__inner {
    font-size: 0.22rem;
    color: #999999;
  }

  .input_desc {
    .el-input__inner {
      height: 1rem;
    }
  }

  .el-upload-list__item-name {
    font-size: 0.2rem;
    color: #999999;
    line-height: 0.4rem;
  }

  .el-icon-upload-success.el-icon-circle-check {
    width: 0.22rem;
    height: 0.22rem;
    text-align: center;
    align-items: center;
  }
}

</style>
<style scoped>
.answer_set {
  background-color: white;
  border: 0.01rem solid #ededed;
  border-radius: 0.1rem;
  padding: 0 0.3rem 0.15rem 0.3rem;
  color: #333333;
  min-height: 7.8rem;
}

.label_desc {
  font-size: 0.24rem;
  font-weight: bold;
  color: #333333;
  letter-spacing: 0.05rem;
}

.label_desc_2 {
  font-size: 0.2rem;
  color: #333333;
  /*letter-spacing: 0.05rem;*/
}

.input_normal {
  width: 2rem;
  height: 0.48rem;
}




.btn_sure,
.btn_cancle {
  width: 2.52rem;
  height: 0.52rem;
  border-radius: 0.1rem;
  font-size: 0.22rem;
  box-shadow: 0rem 0rem 0.15rem -0.05rem #3885f8;
}

.btn_cancle {
  color: #666666;
}

</style>
